import Vue from 'vue'
import App from './App.vue'

/* 引入vuex仓库 */
import store from '@/store'

/* 引入路由 */
import router from '@/router'

/* 三级联动在Home组件 search组件 Detail组件都使用了 所以可以注册为全局组件 */
import TypeNav from '@/components/TypeNav'
/* 引入轮播图组件 */
import Carousel from '@/components/Carousel'
/* 引入分页组件 */
import Pagination from '@/components/Pagination'
/* 按需引入element-ui */
import { Button, MessageBox } from 'element-ui';

/* 引入图片懒加载插件 */
import VueLazyload from 'vue-lazyload'
/* 引入懒加载的那张图 */
import lanjiazai from '@/assets/mobile01.png'

/* 注册图片懒加载插件 */
Vue.use(VueLazyload, {
  /* 懒加载默认图片 */
  loading: lanjiazai,
})

/* 引入mockServe.js ----mock数据 */
import '@/mock/mockServe'
/* 引入轮播图样式 */
import 'swiper/css/swiper.min.css'
/* 注册全局组件 第一个参数为那么 使用TypeNav.name回去TypeNav的name属性 */
Vue.component(TypeNav.name, TypeNav)
/* 注册轮播图全局组件 */
Vue.component(Carousel.name, Carousel)
/* 注册全局分页组件 */
Vue.component(Pagination.name, Pagination)

/* element-ui 注册组件的时候 还有一种方法 挂载到原型上 */
/* 全局注册element-ui组件 */
Vue.component(Button.name, Button)
/* 原型注册element组件 */
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;


/* 统一接收api中所有对外暴露的函数 */
import * as API from '@/api'


Vue.config.productionTip = false

/* 引入表单校验插件 */
import '@/plugins/validate'


/* 引入自定义插件 */
import myplugins from './plugins/myplugins'
/* 注册自定义插件  后面传入的参数可以是一个对象 */
Vue.use(myplugins, {
  name: 'upper'
})
new Vue({
  render: h => h(App),
  /* 注册路由 */
  router,
  /* 注册vuex仓库:组件实例的身上会多了一个属性：$store属性 */
  store,
  /* 配置全局事件总线$bus的配置 */
  beforeCreate() {
    Vue.prototype.$bus = this
    /* 把所有的api接口全部挂载到vue实例原型上使所有组件均可使用  这么使用组件可以直接自己调用接口 */
    Vue.prototype.$API = API
  }
}).$mount('#app')
